<!DOCTYPE html>
<html>

	<head>
		<title>个人页面</title>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
		<link rel="stylesheet" href="/css/reset.css"/>
		<link rel="stylesheet" href="/css/userProfiles.css"/>
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
		<script src="/js/plugins/dialog2/dialog.min.js"></script>
		<script src="/js/common.js"></script>

		<script>
			$(function () {
			    //从url中获取参数
				var param = getParams();
                //如果目标用户id不为空则查询
                var userId=param.id;

                //弹出私信对话
                $("#letterBtn").click(function () {
                    window.location.href =  "/mine/messageLetterDetail.html?userId="+userId;
                });
				if(param.id){
                    //获取当前用户
                    var user = JSON.parse(sessionStorage.getItem('user'));


                    //查询目标用户的信息
				    $.get('/users/'+param.id,function (data) {
						$('.info').renderValues(data)
                    });






                    function getNum() {
                        //查询目标用户的关注数及粉丝数
                        $.get('users/'+param.id+'/relation',function (data) {
                            $('.num').renderValues(data)
                        });
                    }
                    getNum();//立即查询

                    //先判断两者的关系,用于关注按钮回显
					if(user){
					    $.get('/users/relation',{userId:param.id,followId:user.id},function (data) {
							if(data==1){//存在关系
							    $('#followBtn').html("取消关注");
							}
                        })
					}

					//点击关注,先判断当前用户是否登录
					$('#followBtn').click(function () {
                        //先判断当前用户是否登录
                        if(user){
							if($(this).text()=="关注"){//判断两者的关系
                                $.ajax({
									url:'/users/saveRelation',
									type:'put',
									data:{userId:param.id,followId:user.id},
									success: function (data) {
										if(data.success){
											//建立成功
											getNum();//重新查询关注数
											//把关注改为取消关注
                                            $('#followBtn').text("取消关注")
										}
                                	}
                                })
                            }else{//取消关注
								$.ajax({
                                    url:'/users/deleteRelation',
                                    type:'post',
                                    data:{_method:"delete",userId:param.id,followId:user.id},
                                    success:function (data) {
                                        if (data.success) {
                                            //重新查询关注数
                                            getNum();
                                            //把取消关注改为关注
                                            $('#followBtn').text("关注")
                                        }
                                    }
                                })

							}

						}

                    });



                    //声明一个变量,用于当前页的增加
                    var travelCurrentPage=1;
                    var commentCurrentPage=1;
                    //总页数
                    var travelPages;
                    var commentPages;
                    //存储游记的数组
                    var travelArr=[];
                    //存储点评的数组
                    var commentArr=[];

                    //定义一个函数,函数里发请求,使得变量的值仅有限于该次访问
                    function queryTravels() {
                        //查询目标用户的游记 状态为公开的
                        $.get('/users/'+ param.id+'/travels',{isPublic:true,currentPage:travelCurrentPage},function (data) {
                            //获取总条数,并设置显示
                            $('#travels-tab span').html(data.total);

                            $.merge(travelArr,data.list);
                            var json={list : travelArr};

                            $('#travels').renderValues(json,{
                                getHref:function (item, value) {
									$(item).attr('href',$(item).data('href')+value)
                                }
							});
                            //获取总页数
                            travelPages=data.pages;
                        });
                        //当前页加1
                        travelCurrentPage=travelCurrentPage+1;
                    }
                    function queryComments() {
                        //查询目标用户的游记 状态为公开的
                        $.get('/users/'+ param.id+'/comments',{currentPage:commentCurrentPage},function (data) {
                            //获取总条数,并设置显示
                            $('#comments-tab span').html(data.total);

                            $.merge(commentArr,data.list);
                            var json={list : commentArr};

                            $('#comments').renderValues(json,{
                                getHref:function (item, value) {
									$(item).attr('href',$(item).data('href')+value)
                                },
								getStar:function (item, value) {
                                    var starHtml="";
                                    for(i=0;i<value;i++){
                                        starHtml += '<i class="fa fa-star"></i>'
                                    }
                                    for(i=0;i<5-value;i++){
                                        starHtml += '<i class="fa fa-star-o"></i>'
                                    }
                                    $(item).html(starHtml)
                                }
							});
                            //获取总页数
                            commentPages=data.pages;
                        });
                        //当前页加1
                        commentCurrentPage=commentCurrentPage+1;
                    }

                    //执行函数
                    queryTravels();
                    queryComments();

                    //滚动事件
                    $(window).scroll(function () {
                        if($(window).height()+$(document).scrollTop()+1 >= $(document).height()) {
                            if (travelCurrentPage <= travelPages) {
                                queryTravels();
                            } else if(commentCurrentPage<=commentPages){
                                queryComments();
							}else {
                                $(document).dialog({
                                    type: 'notice',
                                    content: '<span class="info-text">已经到底了</span>',
                                    autoClose: 2000
                                })
                            }
                        }
                    })



                }

            })
		</script>
	</head>
	<body>
		<div class="container bg" style="background-image: url(&quot;/img/user/bg.jpeg&quot;);">
			<a href="javascript:window.history.go(-1)" class="my-arrow">
				<span><i class="fa fa-chevron-left fa-2x"></i></span>
			</a>
			<div class="container">
				<div class="info">
					<img class="rounded-circle" width="17%" render-src="headImgUrl">
					<p class="name" render-html="nickName"></p>
					<p render-html="sign"></p>

					<div class="row num">
						<div class="col-2 border border-left-0 border-top-0 border-bottom-0">
							<div>
								<span render-html="follow"></span>
							</div>
							<div>
								<span>关注</span>
							</div>
						</div>
						<div class="col-2">
							<div>
								<span render-html="fans"></span>
									</div>
							<div>
								<span>粉丝</span>
							</div>
						</div>
						<div class="col">
							<button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
							<button class="btn btn-success ibtn" id="followBtn">关注</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="tabs" >
			<ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
				<li class="nav-item">
					<a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
						TA的游记[<span>1</span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
						TA的点评[<span>1</span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
						TA的旅行单[<span>0</span>]
					</a>
				</li>
			</ul>
			<div class="container tab-content" id="pills-tabContent">
				<div class="tab-pane fade show active" id="travels">
						<dl class="list" render-loop="list">
							<dd>
								<a data-href="travelContent.html?id=" render-fun="getHref" render-key="list.id" >
									<img  render-src="list.coverUrl">
									<p><span class="title" render-html="list.title"></span>
										<span class="span-right"></span>
									</p>
								</a>
								<hr>
							</dd>
						</dl>
				</div>

				<div class="comment tab-pane fade " id="comments">
				
					<div render-loop="list">
						<div class="row">
							<div class="col-2 comment-head">
								<img  class="rounded-circle" render-src="list.user.headImgUrl">
							</div>
							<div class="col">
								<span class="comment-star" render-fun="getStar" render-key="list.starNum">
									<i class="fa fa-star"></i>
									<i class="fa fa-star"></i>
									<i class="fa fa-star"></i>
									<i class="fa fa-star-o"></i>
									<i class="fa fa-star-o"></i>
								</span>

								<span class="comment-date" render-html="list.createTime">2018-07-11</span>
								<div class="comment-content">
									<a data-href="strategyComment.html?id=" render-fun="getHref" render-key="list.id">
										<p render-html="list.content">骑了个单车到沙面，春风把从上下九和宝华路带来的燥热吹散。沙面临江，下午的时光让这富有异国风情的公园显得更加宁静惬意，哪怕...</p>
									</a>
								</div>
								<ul class="comment-img" render-loop="list.imgArr">
									<li>
										<img render-src="list.imgArr.self">
									</li>
								</ul>

								<div class="comment-link">
									<a data-href="strategyCatalogs.html?id=" render-fun="getHref" render-key="list.strategy.id">
										<img  render-src="list.strategy.coverUrl"> <span render-html="list.strategy.title"></span>
										<i class="fa fa-angle-right fa-2x"></i>
									</a>
								</div>

							</div>
						</div>
					</div>

				</div>
				<div class="tab-pane fade" id="pills-contact">.3333..</div>
			</div>
		</div>

	

</body>
</html>